<md-content class="md-padding">

<md-card>
<md-toolbar>
<div class="md-toolbar-tools">
  <h2>Shard Record</h2>
  <span flex></span>
    <md-menu>
    <md-button class="md-icon-button" aria-label="Shard actions" ng-click="$mdOpenMenu()" md-menu-origin>
      <md-tooltip>Shard Actions</md-tooltip>
      <md-icon md-font-set="material-icons">more_vert</md-icon>
    </md-button>
    <md-menu-content>
    <md-menu-item ng-repeat="action in shardActions">
      <md-button ng-click="actions.applyShard($event, action, keyspace.name, shard.name)">{{actions.label(action)}}</md-button>
    </md-menu-item>
    </md-menu-content>
    </md-menu>
</div>
</md-toolbar>
<md-card-content>

<div layout="column">
  <div layout="row" layout-align="start center">
    <h3 flex="50">Keyspace/Shard</h3>
    <div id="keyspace-shard" flex ng-bind="keyspace.name+'/'+shard.name"></div>
  </div>

  <md-divider></md-divider>

  <div layout="row" layout-align="start center">
    <h3 flex="50">Master Tablet</h3>
    <div id="master-tablet" flex>
      <span ng-if="!shard.master_alias.uid">None</span>
      <span ng-if="shard.master_alias.uid"
        ng-bind="shard.master_alias.cell+'-'+shard.master_alias.uid"></span>
    </div>
  </div>
</div>

</md-card-content>
</md-card>

<md-card>
<md-toolbar><div class="md-toolbar-tools"><h2>Tablets (by cell)</h2></div></md-toolbar>

<md-content ng-if="cells.length == 0" class="md-padding">
  <h3>No tablets found.</h3>
</md-content>

<md-tabs id="cells" md-border-bottom md-dynamic-height md-center-tabs="false" ng-if="cells.length">
<md-tab ng-repeat="cell in cells" label="{{cell.name}}" md-on-select="setSelectedCell(cell)">
<md-content id="tablets" class="md-padding" layout="row" layout-wrap>

<md-card ng-repeat="tablet in cell.tablets" flex-sm="95" flex-md="95" flex-gt-md="45">

   <md-toolbar ng-class="tabletAccent(tablet)">
   <div class="md-toolbar-tools">
    <h3>{{tablet.alias.cell}}-{{tablet.alias.uid}} [{{tabletType(tablet)}}]</h3>
    <span flex></span>
    <md-menu>
    <md-button class="md-icon-button" aria-label="Tablet actions" ng-click="$mdOpenMenu()" md-menu-origin>
      <md-tooltip>Tablet Actions</md-tooltip>
      <md-icon md-font-set="material-icons">more_vert</md-icon>
    </md-button>
    <md-menu-content>
    <md-menu-item ng-repeat="action in tabletActions">
      <md-button ng-click="actions.applyTablet($event, action, tablet.alias)">{{actions.label(action)}}</md-button>
    </md-menu-item>
    </md-menu-content>
    </md-menu>
  </div>
  </md-toolbar>

  <md-card-content layout="column">

  <div class="card-table-row" layout="row" layout-align="space-between" layout-wrap>
  <strong>Host</strong>
  <a href="http://{{tablet.hostname}}:{{tablet.port_map.vt}}">{{tablet.hostname}}:{{tablet.port_map.vt}}</a>
  </div>

  <md-divider></md-divider>

  <div class="card-table-row" layout="row" layout-align="space-between" layout-wrap>
  <strong>IP Address</strong>
  <a href="http://{{tablet.ip}}:{{tablet.port_map.vt}}">{{tablet.ip}}:{{tablet.port_map.vt}}</a>
  </div>

  <md-divider></md-divider>

  <div class="card-table-row" layout="row" layout-align="space-between" layout-wrap>
  <strong>Seconds Behind Master</strong>
  <span ng-bind="tablet.streamHealth.realtime_stats.seconds_behind_master || 0"></span>
  </div>

  <md-divider></md-divider>

  <div class="card-table-row" layout="row" layout-align="space-between" layout-wrap>
  <strong>Health Error</strong>
  <span ng-bind="tablet.streamHealth.realtime_stats.health_error || 'None'"></span>
  </div>

  </md-card-content>

  <div class="md-actions" layout="row" layout-align="end center">
    <md-button ng-repeat="link in tablet.links" ng-href="{{link.href}}">{{link.title}}</md-button>
  </div>

</md-card>

</md-content>
</md-tab>
</md-tabs>

</md-card>

</md-content>
